<template>
  <div class="pb50 plan-setiting">
    <div class="d-s-s f-w">
      <div v-for="(item, index) in planList" :key="index" class="item d-c-c d-c mb16">
        <div class="f16 fb pb16">{{ item.plan_name }}</div>
        <div class="f14 gray9">
          支付金额：
          <span class="orange">{{ item.money }}</span>
        </div>
        <div class="f14 gray9">
          到账金额：
          <span class="orange">{{ item.real_money }}</span>
        </div>
        <div class="f14 gray9">
          赠送金额：
          <span class="orange">{{ item.give_money }}</span>
        </div>
        <div class="mt16">
          <span class="p-0-20">
            <el-link type="primary" @click="openEdit(item)">编辑</el-link>
          </span>
          <span class="p-0-20">
            <el-link type="danger" @click="delClick(item)">删除</el-link>
          </span>
        </div>
      </div>

      <div class="item item-add d-c-c d-c" @click="openAdd">
        <i class="el-icon-plus" />
        <span>添加</span>
      </div>
    </div>

    <Add :open="open_add" @close="closeAdd" />

    <Edit :open="open_edit" :cur-model="curModel" @close="closeEdit" />
  </div>
</template>

<script>
import planApi from '@/api/balance.js'
import Add from './plan/Add.vue'
import Edit from './plan/Edit.vue'

export default {
  components: {
    Add,
    Edit
  },
  data() {
    return {
      /* 是否正在加载 */
      loading: false,
      /* 充值套餐列表 */
      planList: [],
      /* 是否打开添加 */
      open_add: false,
      /* 是否打开编辑 */
      open_edit: false,
      /* 当前项 */
      curModel: {}
    }
  },
  created() {
    /* 获取数据 */
    this.getData()
  },
  methods: {
    /** 获取数据 **/
    getData() {
      const self = this
      const Params = {}
      planApi
        .listPlan(Params, true)
        .then(res => {
          self.planList = res.data.list
        })
        .catch(() => {})
    },
    /** 打开添加 **/
    openAdd() {
      this.open_add = true
    },
    /** 关闭添加 **/
    closeAdd(e) {
      this.open_add = false
      if (e) {
        this.getData()
      }
    },
    /** 打开编辑 **/
    openEdit(e) {
      this.curModel = e
      this.open_edit = true
    },
    /** 关闭编辑 **/
    closeEdit(e) {
      this.open_edit = false
      if (e) {
        this.getData()
      }
    },
    /** 删除 **/
    delClick(row) {
      const self = this
      self.$confirm('删除后不可恢复，确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        planApi.deletePlan({
          plan_id: row.plan_id
        }).then(data => {
          self.$message({
            message: '删除成功',
            type: 'success'
          })
          self.getData()
        })
      })
    }
  }
}
</script>

<style>
.plan-setiting .item {
  width: 240px;
  height: 160px;
  margin-right: 10px;
  border-radius: 16px;
  background: #f4f5f6;
}

.plan-setiting .item .el-icon-plus {
  font-size: 40px;
  color: #999999;
}

.plan-setiting .item.item-add {
  cursor: pointer;
}
</style>
